import React, { FC, memo } from 'react';
import { Carousel } from 'antd-mobile';
import { IBannerProps } from '@/interface';
import defaultImg from '@/assets/defaultImg.png';

const Banner: FC<IBannerProps> = props => {
  const { banner = [] } = props;
  return (
    <div className="banner">
      {banner.length && (
        <Carousel
          autoplay
          infinite
          autoplayInterval={1500}
          dotActiveStyle={{ background: '#3384d7' }}
          style={{ height: '200px' }}
        >
          {banner.map((item, index) => (
            <div className="carousel-item" key={index}>
              <img
                style={{ width: '100%', height: '200px' }}
                src={item.url || defaultImg}
              />
            </div>
          ))}
        </Carousel>
      )}
    </div>
  );
};

export default memo(Banner);
